<template>
  <view class="setting-container">
    <navbar title="设置"></navbar>
    <view class="top_bg"></view>
    <view class="group" style="margin-top: 30rpx">
      <view class="row-container" @click="toUser">
        <text class="label">个人中心</text>
        <text class="sub-label" v-if="!isLogin">立即登录</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <view class="divider"></view>
      <view class="row-container" @click="toAccount">
        <text class="label">账号绑定</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!-- #ifdef MP-TOUTIAO -->
      <view class="divider"></view>
      <view class="row-container" @click="toOrder">
        <text class="label">订单中心</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <view class="divider"></view>
      <!--      <view class="row-container" @click="toTest">-->
      <!--        <text class="label">测试订阅</text>-->
      <!--        <image src="../../static/black_back.png" class="arrow"></image>-->
      <!--      </view>-->
      <view class="row-container" @click="toTestFollow">
        <text class="label">是否关注</text>
        <text v-if="isFollow" class="sub-label">{{ isFollow === 1 ? '是' : '否' }}</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!--      <button-->
      <!--          open-type="openWebcastRoom"-->
      <!--          bindnavigatetovideoview="eventHandler"-->
      <!--          data-aweme-id="jkydt2023">-->
      <!--        跳转抖音直播间-->
      <!--      </button>-->
      <!-- #endif -->
    </view>
    <!-- #ifdef MP-TOUTIAO -->
    <view class="group">
      <view class="row-container" @click="toScan">
        <text class="label">扫一扫</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
    </view>
    <!-- #endif -->

    <view class="group">
      <view class="row-container" @click="toUpdate">
        <text class="label">检查更新</text>
        <text class="sub-label">v {{ systemInfo.appVersion }}</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <template v-if="mine.dev">
        <view class="divider"></view>
        <view class="row-container" @click="toTestPay">
          <text class="label">测试支付</text>
          <image src="../../static/black_back.png" class="arrow"></image>
        </view>
      </template>
    </view>
    <view class="group">
      <view class="row-container" @click="toYinsi">
        <text class="label">隐私政策</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <view class="divider"></view>
      <view class="row-container" @click="toYonghu">
        <text class="label">用户协议</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <view class="divider"></view>
      <view class="row-container" @click="toGeren">
        <text class="label">个人信息收集清单</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <view class="divider"></view>
      <view class="row-container" @click="toSanfang">
        <text class="label">第三方信息共享清单</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <view class="divider"></view>
      <view class="row-container" @click="toPersonalization">
        <text class="label">个性化选项</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!--    #ifdef APP-PLUS || MP-WEIXIN ||H5 -->
      <view class="divider"></view>
      <view class="row-container" @click="toReport">
        <text class="label">意见与反馈</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!--    #endif-->
    </view>
    <!--    #ifdef APP-PLUS||H5-->
    <view class="group" v-if="isLogin">
      <view class="row-container" @click="tryUnregister">
        <text class="label">账号注销</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
    </view>
    <view class="group">
      <view class="row-container" @click="toAbout">
        <text class="label">关于我们</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
    </view>
    <!--    #endif-->
    <!--    #ifndef MP-TOUTIAO ||MP-WEIXIN -->
    <view class="group" v-if="isLogin" style="border-radius: 100rpx">
      <view class="row-container" style="height: 100rpx;" @click="tryLogout">
        <text class="btn-title">退出登录</text>
      </view>
    </view>
    <!--    #endif-->
    <uni-popup ref="logoutPopup" type="dialog" :mask-click="false">
      <view class="logout-dialog flex-col">
        <view class="content">退出登录后将删除本机的做题记录，且容易造成云端和本机的做题记录不一致，是否确认退出？</view>
        <view class="footer flex-row">
          <view class="btn primary center" @click="logoutClose">取消</view>
          <view class="btn center" @click="logoutConfirm">确定</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="unregisterPopup" type="dialog" :mask-click="false">
      <view class="dialog">
        <view class="title">注销账号</view>
        <view class="content">
          账号注销后，您的手机号以及微信无法再次登录，驾驶员考题详解，若您是VIP用户，您的VIP身份也将失效。
        </view>
        <view class="footer">
          <view class="btn primary" @click="unregisterClose">我再想想</view>
          <view class="btn" @click="unregisterConfirm">申请注销</view>
        </view>
      </view>
    </uni-popup>
    <LoginView ref="LoginView"></LoginView>
    <ReportDialog ref="ReportDialog"></ReportDialog>
    <BindDialog ref="BindDialog"></BindDialog>
    <BindPhoneDialog ref="BindPhoneDialog"></BindPhoneDialog>
    <UpdateDialog ref="UpdateDialog"></UpdateDialog>
    <Pay ref="Pay" @success="onPaySuccess"></Pay>
  </view>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex'
import navbar from '@/components/navbar'
import {commonApi, productApi} from "@/api";
import ReportDialog from "@/components/ReportDialog.vue";
import LoginView from "@/components/LoginView/LoginView.vue";
import Pay from "@/components/Pay.vue";
import BindDialog from "@/components/BindDialog.vue";
import BindPhoneDialog from "@/components/BindPhoneDialog.vue";
import UpdateDialog from "@/components/UpdateDialog.vue";
import utils from "@/libs/utils";

export default {
  components: {
    UpdateDialog,
    BindPhoneDialog,
    Pay,
    ReportDialog,
    LoginView,
    navbar,
    BindDialog
  },
  data() {
    return {
      dyId: 'xinjiakao',
      isFollow: 0
    }
  },
  computed: {
    ...mapGetters(['haveAuths', 'haveVIP', 'platform', 'systemInfo', 'carTypeStr', 'mine']),
    isLogin() {
      if (this.haveVIP) {
        return true
      }

      return this.haveAuths
    },
  },
  onLoad() {
    // #ifdef APP-PLUS
    utils.androidNotificationStatus()
    // #endif
  },
  methods: {
    ...mapActions(['logout', 'checkLogined', 'updateUser', 'refreshUser']),

    toBack() {
      uni.navigateBack()
    },

    toYinsi() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=yinsi'
      });
    },

    toYonghu() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=yonghu',
      });
    },
    toGeren() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=geren',
      });
    },
    toSanfang() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=sanfang',
      });
    },
    toPersonalization() {
      uni.navigateTo({
        url: '/pages/setting/personalization',
      });
    },
    toReport() {
      this.$refs.ReportDialog.open(true)
    },

    toAbout() {
      uni.navigateTo({
        url: '/pages/about/about',
      });
    },
    async toTestPay() {
      const res3 = await productApi.list('14')
      const product = res3.data.data.list[0]
      this.$refs.Pay.open({mode: 'product', from: 'vip', product})
    },
    onPaySuccess() {
      this.refreshUser()
    },
    toUpdate() {
      this.$refs.UpdateDialog.checkUpdate(true)
    },
    toScan() {
      if (!this.isLogin) {
        this.$refs.LoginView.open()
        return
      }
      uni.scanCode({
        success: async ({result}) => {
          console.log(result)
          if (result && result.indexOf('qwtech') === 0) {
            const res = await commonApi.uploadScan(result)
            if (res.data.data) {
              if (res.data.data.msg) {
                uni.showToast({
                  title: res.data.data.msg,
                  icon: 'none',
                  duration: 2000
                });
              }
              if (res.data.data.data) {
                this.updateUser(res.data.data.data)
              }
            }
          }
        }
      })
    },
    toUser() {
      if (!this.isLogin) {
        this.$refs.LoginView.open()
        return
      }
      uni.navigateTo({
        url: '/pages/user/user',
      });
    },
    toOrder() {
      if (this.isLogin) {
        uni.navigateTo({
          url: '/pages/order_list/order_list',
        });
      } else {
        this.$refs.LoginView.open(true)
      }
    },
    toTestFollow() {
      tt.followAwemeUser({
        success(e) {
          console.log('follow succ', e)
        },
        fail: (e) => {
          console.log('follow fail', this.dyId, e)
        }
      })
      tt.checkFollowAwemeState({
        success: (e) => {
          console.log('checkFollowAwemeState succ', e)
          this.isFollow = e.hasFollowed ? 1 : 2
        },
        fail: (e) => {
          console.log('checkFollowAwemeState fail', this.dyId, e)
          uni.showToast({
            title: '未绑定！',
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    toTest() {
      tt.requestSubscribeMessage({
        tmplIds: ['MSG1433680699927252578956333910328'], // 需要填入开放平台申请的模版id，支持最多3个同类型模版
        success(res) {
          //订阅成功
          console.log("订阅成功", res);
        },
        fail(error) {
          //订阅失败
          console.log("订阅失败, 错误详情: ", error);
          tt.showToast({
            title: "订阅失败",
            icon: "fail",
          });
        },
        complete(res) {
          //订阅完成
          console.log("tt.requestSubscribeMessage API调用完成: ", res);
        },
      });
    },
    toAccount() {
      if (!this.isLogin) {
        this.$refs.LoginView.open()
        return
      }
      uni.navigateTo({
        url: '/pages/account/account',
      });
    },
    tryUnregister() {
      console.log('tryUnregister')
      this.$refs.unregisterPopup.open()
    },
    unregisterClose() {
      this.$refs.unregisterPopup.close()
    },

    unregisterConfirm() {
      uni.navigateTo({
        url: '/pages/unregister/unregister',
      });
      this.$refs.unregisterPopup.close()
    },

    tryLogout() {
      if (this.haveVIP) {
        if (this.haveAuths) {
          this.$refs.logoutPopup.open()
        } else {
          this.$refs.BindPhoneDialog.open('quit')
        }
      } else {
        this.$refs.logoutPopup.open()
      }
    },
    logoutClose() {
      this.$refs.logoutPopup.close()
    },
    async logoutConfirm() {
      if (this._lock) {
        return
      }
      uni.showLoading({
        title: '加载中...',
        mask: true
      })

      this._lock = true
      try {
        await this.logout()
        await this.checkLogined()

        uni.showToast({
          title: '退出成功！',
          icon: 'none',
          duration: 2000
        });
        this.$refs.logoutPopup.close()

        uni.reLaunch({
          url: '/pages/home/home'
        })
      } catch (e) {
        console.log(e)
      }
      uni.hideLoading()
      this._lock = false
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f4f3fb;
}
::v-deep .top-bar.white {
  background-color: transparent;
}
.setting-container {
  display: flex;
  flex-direction: column;

  .group {
    margin: 0 32rpx 32rpx 32rpx;
    border-radius: 25rpx;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(217, 217, 217, 0.1);
    z-index: 1;
  }
}

.top_bg {
  background-image: url("@/static/top_bg.png");
  width: 750rpx;
  height: 624rpx;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
}
.logout-dialog {
  border-radius: 24upx;
  background-color: #fff;
  width: 578upx;
  box-sizing: border-box;

  .content {
    font-size: 32upx;
    color: #000000;
    line-height: 2em;
    margin: 48upx 60upx 52upx 60upx;
  }

  .footer {
    padding: 0 32upx 52upx 32upx;

    .btn {
      flex: 1;
      height: 82upx;
      font-size: 30upx;
      background-color: #ededed;
      border-radius: 42upx;
      margin-left: 28upx;

      &:first-child {
        margin-left: 0;
      }

      &.primary {
        background-color: #3073f6;
        color: #fff;
      }
    }
  }
}
</style>
